<template>
  <div class="alarm-container">
    <div>
      <div class="flex justify-between">
        <div class="title">报警监控</div>
      </div>
      <div class="ball-container">
        <WaterBall :value="memAndRom.memoryUsage" :alarm="memAndRom.memoryUsageWarning" title="内存使用百分比"></WaterBall>
        <WaterBall :value="memAndRom.diskUsage" :alarm="memAndRom.diskUsageWarning" title="硬盘使用百分比"></WaterBall>
        <WaterBall :value="memAndRom.cpuUsage" :alarm="memAndRom.cpuUsageWarning" title="CPU百分比"></WaterBall>
      </div>
    </div>
  </div>
</template>

<script>
import WaterBall from '../detail-components/water-ball'

export default {
  name: 'alarm-monitoring',
  components: {
    WaterBall
  },
  data () {
    return {
      thumbStyle: this.CommonConfig.thumbStyle
    }
  },
  props: {
    memAndRom: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
  },
  computed: {
  },
  methods: {
  }
}
</script>

<style lang="stylus" scoped>
.alarm-container
  padding 20px
  margin-bottom 20px
  height 460px

.ball-container
  display flex
  align-items center
  justify-content space-around
  height 300px
</style>
